<template>
    <div class="home-page" @click="handleOutsideClick">
        <!-- 背景 -->
        <div class="background" :class="{ blurred: isSearchFocused, loading: isImageLoading }"
            :style="{ backgroundImage: isImageLoading ? 'none' : `url(${backgroundImage})` }"></div>

        <!-- 顶部导航栏 -->
        <a-row justify="end" align="middle" class="nav-bar">
            <a-avatar size="large" :src="profilePictureUrl" @click.stop="toggleTooltip" class="user-avatar" />
            <div v-if="isTooltipVisible" class="user-tooltip">
                <p>{{ isLoggedIn ? userName : '请先登录' }}</p>
                <a-button type="link" size="small" @click="goToSettings" v-if="isLoggedIn">
                    设置
                </a-button>
                <a-button type="link" size="small" @click="goToLogin" v-else>
                    登录
                </a-button>
            </div>
        </a-row>

        <!-- 中间搜索框 -->
        <div class="search-container">
            <a-input v-model:value="searchText" placeholder="请输入搜索内容" class="search-box" size="large"
                @focus="isSearchFocused = true" @blur="isSearchFocused = false" @keyup.enter="handleSearch">
                <template #prefix>
                    <svg t="1733137431929" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4584" width="16" height="16">
                        <path
                            d="M118.8 405.9H101c0 117.8 74.7 222.9 185.9 261.6l5.9-16.9c-104.1-36.2-174-134.6-174-244.7z m201.9 271c18.7 3.9 37.9 5.9 57.1 5.9v-17.9c-18 0-36-1.9-53.5-5.5l-3.6 17.5z"
                            fill="#2c2c2c" p-id="4585"></path>
                        <path
                            d="M643.7 593.7c37.7-53.2 60-117.9 60-187.8C703.7 226.2 557.6 80 377.9 80S52.1 226.2 52.1 405.9s146.1 325.8 325.8 325.8c102.1 0 193.3-47.3 253-121L938 917.8l14.8-14.9-309.1-309.2zM377.9 710.6c-168.1 0-304.8-136.7-304.8-304.8S209.8 101 377.9 101s304.8 136.7 304.8 304.8S546 710.6 377.9 710.6z"
                            fill="#2c2c2c" p-id="4586"></path>
                    </svg>
                </template>
            </a-input>
        </div>
        <a-spin v-if="isLoading" class="loading-spinner" size="large" />
        <!-- 搜索结果列表 -->
        <div v-if="searchResults.length > 0" class="search-results" :class="{ show: showSearchResults }">
            <ul>
                <li v-for="(result, index) in searchResults" :key="index" class="search-item">
                    <a :href="result.url" target="_blank">
                        <div class="search-item-content">
                            <img :src="result.imgUrl" alt="image" class="search-item-img" />
                            <div class="search-item-info">
                                <h3>{{ result.title }}</h3>
                                <p>{{ result.description }}</p>
                            </div>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

        <!-- 显示/隐藏按钮
        <a-button class="toggle-button" @click="toggleSearchResults">
            <svg t="1733300305161" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                p-id="7078" width="32" height="32">
                <path d="M640.213333 853.333333h-124.16V128h124.16z" fill="#CCCCCC" p-id="7079"></path>
                <path
                    d="M744.96 470.186667h-61.44V217.6c0-70.826667-60.586667-128-131.413333-128H128c-70.826667 0-128 52.053333-128 122.88v554.666667c0 70.826667 57.173333 128 128 128h424.106667c70.826667 0 131.413333-58.88 131.413333-129.706667l-3.413333-253.866667 65.28-0.426666c11.946667 0 22.613333-7.253333 22.613333-18.773334-0.853333-11.946667-11.52-22.186667-23.04-22.186666zM516.266667 469.333333H247.893333l97.706667-97.706666c8.533333-8.533333 8.533333-21.76 0-30.293334s-21.76-8.533333-30.293333 0l-109.226667 109.226667c-5.12 5.12-2.56 2.56-8.106667 7.68l-5.546666 5.973333c-11.946667 9.386667-18.346667 14.506667-17.493334 26.026667 0.853333 8.96 5.12 12.8 10.24 17.92l7.68 7.68c7.68 7.68 8.106667 9.386667 13.226667 14.506667L315.306667 640c8.533333 8.533333 21.76 8.533333 30.293333 0s8.533333-21.76 0-30.293333L247.893333 512h268.373334v256c0 46.933333-38.4 85.333333-85.333334 85.333333h-302.933333c-46.933333 0-85.333333-38.4-85.333333-85.333333V213.333333c0-46.933333 38.4-85.333333 85.333333-85.333333h302.933333c46.933333 0 85.333333 38.4 85.333334 85.333333v256zM641.706667 768c0 46.933333-38.4 85.333333-85.333334 85.333333h-33.28c20.48-22.613333 33.28-52.48 33.28-85.333333v-256h85.333334v256z m0-298.666667h-85.333334V213.333333c0-32.853333-12.8-62.72-33.28-85.333333H556.373333c46.933333 0 85.333333 38.4 85.333334 85.333333v256z m300.8 296.533334l-1.28 2.56v0.426666c-3.413333 6.826667-10.666667 11.52-18.773334 11.52-11.946667 0-21.333333-9.813333-21.333333-21.333333 0-2.986667 0.426667-5.546667 1.706667-8.106667v-0.426666c75.093333-164.266667 75.093333-352.853333-0.426667-517.12a21.376 21.376 0 0 1 19.626667-29.866667c9.813333 0 17.92 6.826667 20.48 16.213333a662.613333 662.613333 0 0 1 0 546.133334z m-88.746667-423.68c39.253333 90.026667 38.826667 192-1.28 282.026666-0.426667 1.28-0.853333 2.56-1.28 3.413334v0.426666c-3.84 6.826667-10.666667 11.52-18.773333 11.52-11.946667 0-21.333333-9.813333-21.333334-21.333333 0-2.56 0.426667-5.12 1.706667-7.68 0 0 0-0.426667 0.426667-0.426667 37.12-81.493333 37.12-174.506667-0.426667-256l0.426667-0.426666a14.72 14.72 0 0 1-1.28-5.546667c0-11.946667 9.813333-21.333333 21.333333-21.333333 7.253333 0 13.226667 3.84 17.066667 9.386666l0.426666-0.426666c0.426667 0.853333 0.426667 1.706667 0.853334 2.56 1.28 1.28 1.706667 2.56 2.133333 3.84z"
                    fill="#666666" p-id="7080"></path>
            </svg>
        </a-button> -->
    </div>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { searchGet } from '@/api/search';
import { getUserStatus } from '@/api';
import { message } from 'ant-design-vue';
const router = useRouter();

const backgroundImage = ref('http://124.71.148.150:9001/api/v1/buckets/cdatguiguts/objects/download?preview=true&prefix=fee80f9084444c44b847622e1ba5760e&version_id=null');
const profilePictureUrl = ref('http://124.71.148.150:9001/api/v1/buckets/hamos/objects/download?preview=true&prefix=5d5f43c0b2364119b6b6599cb981ed63.jpg&version_id=null');
const userName = ref('未登录');
const searchResults = ref([]);
const isSearchFocused = ref(false);
const searchText = ref('');
const showSearchResults = ref(false);  // 默认情况下，搜索结果是隐藏的
const isTooltipVisible = ref(false);
const isImageLoading = ref(true); // 用于指示背景图片是否加载完成
const isLoggedIn = ref(false); // 模拟用户登录状态，true为已登录，false为未登录
import { nextTick } from 'vue';
const isLoading = ref(false);
const isSearchDisabled = ref(false);
import { notification } from 'ant-design-vue'; // 导入通知组件

const handleSearch = async () => {
    if (isSearchDisabled.value) {
        notification.success({
            message: '请您稍等片刻，搜索正在进行中。',
            description: '在等待的过程中，享受每一个细节，我们正在努力为您提供更精准的结果。'
        });
        return ;
    };  // 如果搜索按钮被禁用，直接返回
    console.log('开始搜索');
    if (searchText.value.trim() === '') {
        searchResults.value = [];
        return;
    }
    isLoading.value = true;
    isSearchDisabled.value = true;  // 禁用按钮
    console.log('搜索内容：', searchText.value);
    try {
        const searchResultsElement = document.querySelector('.search-results');
        if (searchResultsElement) {
            searchResultsElement.scrollTop = 0; // 将滚动位置设置为顶部
        }
        // 假设这是调用后端接口来获取搜索结果
        const response = await searchGet(searchText.value);
        console.log('搜索结果：', response); // 打印响应内容，检查数据
        if (response.code === 200) {
            message.success('搜索成功');
            searchResults.value = response.data.res;
            console.log('更新后的搜索结果：', searchResults.value); // 打印更新后的结果
            // 使用 nextTick 确保 DOM 更新后再添加 'show' 类
            nextTick(() => {
                const searchResultsElement = document.querySelector('.search-results');
                if (searchResultsElement) {
                    searchResultsElement.classList.add('show');
                }
            });
        } else {
            message.error('搜索失败');
            searchResults.value = [];
        }
    } catch (error) {
        console.error('搜索请求失败', error);
        searchResults.value = [];
    } finally {
        isLoading.value = false;
        isSearchDisabled.value = false;  // 搜索完成后启用按钮
    }
};

// 切换弹出框显示状态
const toggleTooltip = () => {
    isTooltipVisible.value = !isTooltipVisible.value;
};

// 点击页面其他位置关闭弹出框
const handleOutsideClick = (event) => {
    if (!event.target.closest('.search-results') && !event.target.closest('.search-box')) {
        document.querySelector('.search-results').classList.remove('show');
    }
};

// 进入设置页面
const goToSettings = () => {
    router.push('/settings'); // 假设设置页面的路径为 /settings
};

// 进入登录页面
const goToLogin = () => {
    console.log('跳转到登录页面');
    router.push('/sign');
};

const toggleSearchResults = () => {
    showSearchResults.value = !showSearchResults.value;
    console.log(showSearchResults.value)
};

// 在图片加载完成后更新状态
onMounted(async () => {
    let imagUrl = "";
    try {
        let res = await getUserStatus()
        if (res.code == 200) {
            isLoggedIn.value = res.data.loggedIn;
            backgroundImage.value = res.data.backgroundImage;
            userName.value = res.data.username;
            profilePictureUrl.value = res.data.profilePictureUrl;
            imagUrl = res.data.backgroundImage;
        }
    } catch (e) {
        backgroundImage.value = 'http://124.71.148.150:9001/api/v1/buckets/cdatguiguts/objects/download?preview=true&prefix=fee80f9084444c44b847622e1ba5760e&version_id=null';
        profilePictureUrl.value = 'http://124.71.148.150:9001/api/v1/buckets/hamos/objects/download?preview=true&prefix=5d5f43c0b2364119b6b6599cb981ed63.jpg&version_id=null';
        userName.value = '未登录';
        imagUrl = backgroundImage.value;
    }
    const img = new Image();
    img.src = imagUrl;
    img.onload = () => {
        isImageLoading.value = false;
    };
});
</script>

<style scoped>

/* 加载动画的样式 */
.loading-spinner {
    display: block;
    margin: 20px auto;
    text-align: center;
}


.home-page {
    position: relative;
    height: 100vh;
    overflow: hidden;
    font-family: 'Arial', sans-serif;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: filter 0.3s ease, box-shadow 0.3s ease;
    background-color: black;
}

.background.loading {
    background-color: black;
}

.background.blurred {
    filter: blur(10px);
    box-shadow: inset 0 0 50px rgba(50, 50, 50, 0.6);
}

.nav-bar {
    position: absolute;
    top: 10px;
    right: 20px;
    z-index: 10;
}

.user-avatar {
    width: 50px;
    height: 50px;
    cursor: pointer;
    margin-left: 10px;
    position: relative;
}

.user-tooltip {
    position: absolute;
    top: 60px;
    right: 0;
    background: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 180px;
    z-index: 15;
    transition: opacity 0.3s ease;
    opacity: 1;
}

.user-tooltip p {
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}

.search-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    /* 调整搜索框的z-index */
}

.search-box {
    width: 400px;
    height: 40px;
    border-radius: 15px;
    padding: 0 16px;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: width 0.5s ease, box-shadow 0.3s ease;
}

.search-box:focus {
    border-color: #40a9ff;
    box-shadow: 0 0 8px rgba(64, 169, 255, 0.5);
}

.search-box .ant-input-prefix {
    font-size: 18px;
    color: #1890ff;
}

.search-container .search-box {
    animation: expand-from-center 1s ease forwards;
}

.search-results {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    transition: transform 0.3s ease-in-out;
    transform: translateX(100%);
    /* 初始时隐藏，向右偏移100% */
    z-index: 10;
}

.search-results.show {
    transform: translateX(0);
    /* 展开时平滑过渡，移动到0位置 */
}


.toggle-button {
    position: fixed;
    top: 50%;
    right: 20px;
    width: 32px;
    height: 32px;
    padding: 0px;
    transform: translateY(-50%);
    z-index: 20;
    margin: 0px;
    background-color: transparent;
}

.toggle-button .rotate {
    transform: rotate(180deg);
    /* 当展开时，按钮旋转180度 */
    transition: transform 0.3s ease;
}


li {
    list-style-type: none;
}

.search-item {
    width: 100%;
    margin: 20px 0;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: slideInFromRight 0.5s forwards;
}

.search-item-content {
    display: flex;
    padding: 16px;
}

.search-item-img {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    margin-right: 16px;
}

.search-item-info {
    flex-grow: 1;
}

.search-item-info h3 {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.search-item-info p {
    font-size: 14px;
    color: #666;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes expand-from-center {
    0% {
        width: 0;
        opacity: 0;
    }

    100% {
        width: 400px;
        opacity: 1;
    }
}

a-button {
    color: #1890ff;
    font-size: 14px;
    padding: 0;
    width: 100%;
}
</style>